<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4.实战（一）：如何使用图表库绘制常用数据图表-QCharts 绘制饼图</title>
    <style>
        #app{
            border:1px solid #ccc;
            width:500px;
            height:500px;
        }
    </style>
</head>
<body>
    <p>
        qcharts图表由图表（chart）对象及其子元素构成。其中图表对象的子元素包含图形（Visual）和其他插件（Plugin）。图形是必选元素，其他的插件都是可选元素
    </p>
    <div id="app"></div>

    <script src="https://unpkg.com/spritejs/dist/spritejs.min.js"></script>
    <script src="https://unpkg.com/@qcharts/core@1.0.25/dist/index.js"></script>

    <script type="module">
        // Line->Area：折线图-折线面积图
        // Bar-柱状图
        const { Chart, Pie, Tooltip } = qcharts;

        // 1.创建图表对象
        const chart = new Chart({
            container:"#app"
        });

        // 2.创建完图表对象之后，就绑定数据
        
        const data = [
            { date: '05-01', category: '图例一', sales: 15.2 },
            { date: '05-02', category: '图例一', sales: 39.2 },
            { date: '05-03', category: '图例一', sales: 31.2 },
            { date: '05-04', category: '图例一', sales: 65.2 },
            { date: '05-05', category: '图例一', sales: 55.2 },
            { date: '05-06', category: '图例一', sales: 75.2 },
            { date: '05-07', category: '图例一', sales: 95.2 },
            { date: '05-08', category: '图例一', sales: 100 }
        ];
        // chart.source方法进行数据绑定。并且可以设置数据的行、数值、文本等，这些设置会被图形或其他插件使用
        chart.source(data,{
            row:"date", // 指定数据的行
            value:"sales", // 指定数据的数值
            text:"date", // 指定数据的文本
        });

        // 3.指定图形对象(面积图)
        const pie = new Pie();
        
        // 4.添加插件，实现坐标轴、图例等
        // 4.1添加提示条
        const tooltip = new Tooltip();

        // 5.添加到 chart 对象的子元素中去(显示)
        chart.append([ pie, tooltip ]);

    </script>
</body>
</html>